<template>
  <div class="content-container">
    <div class="header">
      <el-radio-group v-model="timeMode" size="medium" class="topTab">
        <el-radio-button label="单日"></el-radio-button>
        <el-radio-button label="多日"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="content">
      <el-row >
        <transition-group name="el-fade-in">
          <EFCharts
              v-for="(item, index) in chartsArr"
              :key="'chart-' + item"
              :index="index"
              @deleteChart="deleteChart"
              :time-mode="timeMode"
              :show-delete="showDelete"
          />
        </transition-group>
      </el-row>
      <el-button
          size="medium"
          type="text"
          icon="el-icon-circle-plus"
          style="margin-left: 40px; color: #666666"
          v-if="!multiDay"
          @click="addChart"
      >添加图表</el-button>
    </div>
  </div>
</template>

<script>
import EFCharts from "@/components/common/EFCharts";

export default {
  name: 'Aroc',
  components: {
    EFCharts,
  },
  data() {
    return {
      timeMode: '单日',
      chartsArr: [0], // 填充进数组的值无意义，只是为了循环渲染多张表
    }
  },
  methods: {
    deleteChart(index) {
      this.chartsArr.splice(index,1);
    },
    addChart() {
      // 填充进数组的值无意义，只是为了循环渲染多张表
      this.chartsArr.push(new Date().valueOf());
    }
  },
  mounted() {
    this.page = this.$route.meta.page; // 通过路由确定页面
  },
  computed: {
    multiDay() {
      return this.timeMode === '多日';
    },
    showDelete() {
      return this.timeMode === '单日' && this.chartsArr.length > 1;
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/main.scss';
@import '@/assets/css/EFcontent.scss';

.content-container{
  .content{
    width: 100%;
    overflow: auto;
    top: 45px;
  }
}
</style>